<script setup>
    import Add from '../../globalCompoents/Add.vue';
    import PlayBtn from '../../globalCompoents/PlayBtn.vue'
    import { ref, getCurrentInstance, onMounted, computed } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    const axios = getCurrentInstance().proxy.$http;    
    const route = useRoute();
    const router = useRouter();

    let singerSong = ref();
    onMounted(async () => {
        let { data } = await axios.get(`/artists?id=${route.query.id}`)
        if(data.code !== 200) return alert('获取歌手歌曲失败');
        singerSong.value = data;
        console.log(singerSong.value);
    })


    const handlerTime = (millisecond) => {
        let minute = parseInt(millisecond / 1000) / 60;
        let time = String(minute).split('.');
        minute = time[0] > 9 ? time[0] : '0' + time[0];
        if(time[1] === undefined) { time[1] = 0 };
        time = parseInt(('0.' + time[1]) * 60)
        let seconds = time > 9 ? time : '0' + String(time);
        return `${minute}:${seconds}`
    }


    // 跳转到单曲
    const toSong = (id) => {
        router.push({name: 'song', query: { id }})
    }

</script>

<template>
    <main>
        <header>
            <img :src="singerSong?.artist.picUrl" alt="">
            <div>
                <strong>{{singerSong?.artist.name}}</strong>
                <p>{{singerSong?.artist.briefDesc}}</p>
            </div>            
        </header>

        <ul class="content">
            <li 
                v-for="(item, index) of singerSong?.hotSongs"
            >
                <div>{{index+1}}</div>
                <div>
                    <PlayBtn :id="item.id"></PlayBtn>
                    <Add
                        :id="item.id" 
                        :songName="item.name"
                        :singerList="item.ar"
                        :duration="item.dt"
                    ></Add>
                </div>
                <div @click="toSong(item.id)"><span>{{item.name}}</span></div>
                <div>{{handlerTime(item.dt)}}</div>
                <div>{{item.al.name}}</div>
            </li>
        </ul>
    </main>
</template>

<style lang='less' scoped>
    main{
        width: 980px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        background-clip: content-box;
        padding: 40px;
        margin: 0 auto;
        header{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 40px;
            height: 300px;
            div{
                display: grid;
                grid-template-rows: 40px 1fr;
                strong{
                    font-size: 25px;
                }
                p{
                    width: 100%;
                    height: 280px;
                    line-height: 25px;
                    text-indent: 2em;
                    font-size: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 11;
                    -webkit-box-orient: vertical;
                }
            }
            img{
                width: 100%;
                height: 310px;
                border-radius: 10px;
            }
        }

        .content{
            margin: 50px 0px;
            li{
                height: 30px;
                line-height: 30px;
                display: grid;
                grid-template-columns: 0.5fr 1.5fr 3fr 1fr 1.5fr;
                &:nth-child(2n+1) {
                    background-color: rgb(238, 238, 238);
                }
                div{
                    font-size: 10px;
                    padding-left: 10px;
                    color: #555;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    &:nth-child(2) {
                        display: grid;
                        grid-template-columns: repeat(5, 1fr);
                        place-items: center;
                    }
                    &:nth-child(3) {
                        span{
                            cursor: pointer;
                            &:hover{
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }
</style>